<template>
	<!-- 展示图片列表 -->
	<view class="df aic fww">
		<!-- 点击上传 -->
		<image :style="{width,height}" class="mb20 mr15" :src="srcImg" @click="upload" v-if="!view" />
		<view :style="{width,height}" class="pr mr15" :class="{'ml20 mb20':imgMlr20}" v-for="(item,index) in Data"
			:key="index">
			<!-- image -->
			<image :src="util.getImage(item)" class="br10 c999 " mode="aspectFill"
				@click="util.previewImage(Data,{index})" v-if="type == 'image'" />
			<!-- video -->
			<video :src="util.getImage(item)" style="z-index: 10;" controls class="br10 c999 zi9" object-fit="cover"
				v-else-if="type == 'video'" />
			<!-- <view class="br10 c999 bDFDFDF wh212 height df fdc aic jcc img64" v-if="type=='file'">
				<image src="https://api.youdaike.com/static/yx-market/zhaopian.png" mode="" />
				文件
			</view> -->
			<!-- 删除图片按钮 -->
			<view class="pa lh30" style="top: 10rpx;right: 5rpx; z-index: 20;" @click.stop="Data.splice(index,1)"
				v-if="!view || dele">
				<view class=" clearTypeBox">
					<uni-icons type="clear" size="22" color="red"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 上传图片
		name: "uploadImages",
		props: {
			// 查看
			view: {
				type: Boolean,
				default: false,
			},
			type: {
				type: String,
				default: 'image',
			},
			dele: { // 
				type: Boolean,
				default: false,
			},
			srcImg: {
				type: String,
				default: '/static/yx-market/zhaopian.png'
			},
			src: {
				type: Array,
				default: () => {
					return [];
				},
			},
			width: {
				type: String,
				default: '152rpx',
			},
			height: {
				type: String,
				default: '152rpx',
			},
			max: {
				type: Number,
				default: 9,
			},
			imgMlr20: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				Data: this.src,
			};
		},
		created() {
			// this.Data = this.src;
		},
		watch: {
			Data(newVal, oldVal) {
				//console.log("new: ")
				//console.log(newVal)
				//console.log("old: ")
				//console.log(oldVal)
				this.$emit('update:src', newVal)
				this.$emit('update', newVal);
			},
			src: {
				handler(newVal, oldVal) {
					this.Data = newVal ? newVal : [];
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 上传
			upload() {
				// 图片
				if (this.type == 'image') {
					this.upload_image();
					return
				}
				// video
				if (this.type == 'video') {
					this.upload_video();
					return
				}
				// 其他
				if (['file'].includes(this.type)) {
					this.upload_files();
				}
			},
			upload_image() { //上传图片
				if (!(this.Data.length < this.max)) { //数量限制器
					this.util.alert('最大上传数量：' + this.max)
					return
				};
				console.log("upload_image");
				uni.chooseImage({ // 选择
					count: this.max - this.Data.length,
					success: rs => {
						rs.tempFiles.forEach(item => {
							if (item.size / 1024 / 1024 > 10) {
								this.util.alert('上传图片不允许超过10M');
								return
							}
							let fileExtension = item.path.split('.').pop();
							let allowExtension = ['png', 'jpg', 'jpeg', 'gif', 'bmp']; // 允许上传的文件格式
							if (allowExtension.includes(fileExtension)) {
								this.$api.upload({
									file: item.path,
									url: this.util.config.upload_image_file_api_oss
								}).then(res => {
									console.log("图片上传测试");
									console.log(res);
									this.Data.push(res.url);
									// this.$emit('update:src', this.Data)
								})
							} else {
								uni.showToast({
									title: '文件格式不正确，请上传' + allowExtension.join('/') + '格式的文件',
									icon: 'none'
								});
							}
							/*
							this.$api.upload({
								file: item.path,
								url: this.util.config.upload_image_file_api_oss
							}).then(res => {
								console.log("图片上传测试");
								console.log(res);
								this.Data.push(res.url);
								// this.$emit('update:src', this.Data)
							})*/
						});
					},
				})
			},
			upload_video() { //上传视频
				if (!(this.Data.length < this.max)) { //数量限制器
					this.util.alert('最大上传数量：' + this.max)
					return
				};
				uni.chooseVideo({ // 选择
					sourceType: ['camera', 'album'],
					success: rs => {
						if (rs.tempFilePath.size / 1024 / 1024 > 10) {
							this.util.alert('上传视频不允许超过10M');
							return
						}
						this.$api.upload({
							file: rs.tempFilePath,
							url: this.util.config.upload_video_file_api_oss
						}).then(res => {
							console.log(res);
							this.Data.push(res.url + ',' + res.imgurl);
						})
					},
				})
			},
			upload_files() { // 上传文件
				if (!(this.Data.length < this.max)) { // 數量限制器
					this.util.alert('最大上传数量：' + this.max)
					return
				};
				// #ifdef H5
				uni.chooseFile({
					count: 1, //默认100
					extension: ['.doc', '.docx'],
					success: rs => {
						/*
						if (rs.size / 1024 / 1024 > 10) {
							this.util.alert('上传文件不允许超过10M');
							return
						} */
						this.$api.index.upload({
							file: rs.tempFiles[0].path
						}).then(res => {
							this.Data.push(res);
							// this.$emit('update:src', this.Data)
						})
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				wx.chooseMessageFile({
					count: this.max - this.Data.length,
					type: this.type,
					success: rs => {
						rs.tempFiles.forEach(item => {
							if (item.size / 1024 / 1024 > 10) {
								this.util.alert('上传文件不允许超过10M');
								return
							} else {
								this.$api.index.upload({
									file: rs.tempFiles[0].path
								}).then(res => {
									this.Data.push(res);
									// this.$emit('update:src', this.Data)
								})
							}
						});
					},
				})
				// #endif
			},
		},
	}
</script>
<style lang="less">
	@import "@/colorui/mains.css";

	.wh212 {
		width: 212rpx;
		height: 212rpx;
	}
	.mr15{
		margin-right: 15rpx;
	} 
	.clearTypeBox {
		width: 30rpx;
		height: 30rpx;
		// z-index: 10;
		background-color: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translate(10rpx, -20rpx);
	}
</style>